import { ScrollView, View, Text, Image, Picker } from '@tarojs/components';
import React, { Component } from 'react';
import Taro, { getCurrentInstance } from '@tarojs/taro';
import { connect } from 'react-redux';
import './index.less';
import * as T from './types';
import actions from './actions';
import { store2Props } from './selectors';
import rightIcon from './img/right.png';
import giftIcon from './img/giftIcon.png';
import inputGiftPackAddress from './img/inputGiftPackAddress.png';
import noList from './img/noList.png';
import { AtIcon } from 'taro-ui';
import 'taro-ui/dist/style/components/icon.scss';
actions().actions.loadReducer();
// @ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class MyGiftPackMain extends Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
      yearAndMonth: '筛选',
    };
  }

  componentDidMount(): void {
    this.props.actions.init();
  }
  componentWillUnmount(): void {
    // this.props.actions.action.commonChange('main', {
    //   list: [],
    //   type: 'more',
    //   searchForm: {
    //     pageNum: -1,
    //     yearMonth: undefined,
    //     pageSize: 10,
    //   },
    // });
    this.props.actions.clean();
  }
  onYearAndMonthChange(e) {
    console.log('eeeeeee===========', e);
    this.setState(
      {
        yearAndMonth: e.detail.value,
      },
      () => {
        let newStr = e.detail.value.replace('-', ',');
        this.props.actions.action.commonChange('main.type', 'more');
        this.props.actions.action.commonChange('main.searchForm', {
          yearMonth: newStr,
          pageNum: -1,
          pageSize: 10,
        });
        this.props.actions.action.commonChange('main.type', 'loading');
        this.props.actions.action.commonChange('main.searchForm.pageNum', -1);
        this.props.actions.action.commonChange('main.list', []);
        this.props.actions.action.page();
      },
    );
  }
  render() {
    const {
      main: { type, list },
    } = this.props;
    // const drawStatus = list.length > 0 && Array.isArray(list.couponInfos[0]) && list.couponInfos[0].drawStatus == 0
    return (
      <View className="packageBMyGiftPackMain">
        <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', height: "100rpx" }}>
          {/* <View className="packageBMyGiftPackMain-filter">
            2023 <Image className="rightIcon" src={rightIcon} />
          </View> */}
          <Picker
            fields="month"
            mode="date"
            value={this.state.yearAndMonth}
            onChange={this.onYearAndMonthChange.bind(this)}
          >
            <View className="packageBMyGiftPackMain-filter">
              筛选 <Image className="rightIcon" src={rightIcon} />
            </View>
            {/* <AtList>
                <AtListItem extraText={this.state.yearAndMonth} />
              </AtList> */}
          </Picker>
        </View>
        <ScrollView
          scrollY
          style={{height:`calc(100vh - 100rpx)`}}
          onScrollToLower={() => {
            if (type === 'more') {
              this.props.actions.action.commonChange('main.type', 'loading');
              this.props.actions.action.page();
            }
          }}
        >
          {list.map((e) => (
            <View className="giftPack" key={e.giftId}>
              <Image className="giftPack-icon" src={giftIcon} />
              <View>
                {Array.isArray(e.couponInfos) &&
                  e.couponInfos.map((e, i) => (
                    <View
                      className="giftPack-title"
                      key={i}
                      onClick={() => {
                        Taro.navigateTo({
                          // 优惠券
                          url: '/pages/package-A/customer/my-coupon/index',
                        });
                      }}
                    >
                      {e.couponName} <AtIcon value="chevron-right" size="10" color="#218CFF"></AtIcon>
                    </View>
                  ))}
                {e.points && (
                  <View
                    className="giftPack-integral"
                    onClick={() => {
                      Taro.navigateTo({
                        // 商品
                        url: '/pages/package-C/points-mall/index',
                      });
                    }}
                  >
                    {e.points}积分值
                    <AtIcon value="chevron-right" size="10" color="#218CFF"></AtIcon>
                  </View>
                )}
                {e.goodsInfos &&
                  Array.isArray(e.goodsInfos.goodsInfoDTOS) &&
                  e.goodsInfos.goodsInfoDTOS.map((e, i) => (
                    <View
                      className="giftPack-good"
                      key={i}
                      onClick={() => {
                        Taro.navigateTo({
                          // 商品
                          url: `/pages/package-B/goods/goods-details/index?skuId=${e.goodsInfoId}`,
                        });
                      }}
                    >
                      {e.goodsInfoName} <AtIcon value="chevron-right" size="10" color="#218CFF"></AtIcon>
                    </View>
                  ))}
                {Array.isArray(e.extraInfo) &&
                  e.extraInfo.map((e, i) => (
                    <View
                      className="giftPack-good"
                      key={i}
                      onClick={() => {
                        Taro.navigateTo({
                          // 商品
                          url: '/pages/package-A/customer/my-coupon/index',
                        });
                      }}
                    >
                      {e}
                      <AtIcon value="chevron-right" size="10" color="#218CFF"></AtIcon>
                    </View>
                  ))}
                <View className="giftPack-time">发放时间:{e.createTime.split(' ')[0]}</View>
              </View>
              {e.goodsInfos && e.goodsInfos.goodsInfoDTOS.length > 0 && e.goodsInfos.drawStatus == 0 && (
                <Text
                  className="inputGiftPackAddress"
                  onClick={() => {
                    this.props.actions.action.toOrderDetali(e.goodsInfos, e.recordId);
                  }}
                >
                  立即领取
                </Text>
                // <Image
                //   src={inputGiftPackAddress}

                // />
              )}
              {/* <Image src={inputGiftPackAddress} className="inputGiftPackAddress" onClick={() => {
                this.props.actions.action.toOrderDetali(e.goodsInfos)
              }} /> */}
              <View className="giftPack-typeImage">
                <Text className="giftPack-typeImage-text">{e.giftName}</Text>
              </View>
            </View>
          ))}
        </ScrollView>

        {type === 'last' && list.length <= 0 && (
          <View className="giftPack-noList">
            <Image src={noList} style={{ width: '394rpx', height: '270rpx' }} />
            啊哦，暂无数据～
          </View>
        )}
      </View>
    );
  }
}
